<template>
  <div>
    <el-button type="primary" >通过</el-button>
    <el-button type="danger" >拒绝</el-button>
    <el-button type="warning" plain @click="dai">待审批</el-button>
    <el-button type="success" plain @click="yi">已审批</el-button>

     <!-- 待审批弹出框 -->
     <el-dialog v-model="dialogTableVisible" title="待审批数据" width="1500">
    <el-table :data="tabledata">
      <el-table-column property="id" label="编号" width="50" />
      <el-table-column property="goods_name" label="货物名称" width="100" />
      <el-table-column property="goods_type" label="类型" width="100" />
      <el-table-column property="material" label="材质" width="100" />
      <el-table-column property="specification" label="规格" width="100" />
      <el-table-column property="quantity" label="数量" width="100" />
      <el-table-column property="usage_description" label="用途描述" width="100" />
      <el-table-column property="applicant" label="申请人" width="100" />
      <el-table-column property="expected_delivery_date" label="期望交付日期" width="100" />
      <el-table-column property="remarks" label="备注" width="100" />
      <el-table-column property="create_time" label="创建时间" width="100" />
      <el-table-column property="approver" label="审批人" width="100" />
      <el-table-column property="status" label="状态" width="100">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == '待审批'" type="warning">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="" label="">
        <template v-slot="scope">
          <el-button type="primary" @click="tongguo(scope.row.id)">通过</el-button>
          <el-button type="danger" @click="jujue(scope.row.id)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
     </el-dialog>

     <!-- 已审批弹出框 -->
     <el-dialog v-model="dialogTableVisible2" title="已审批数据" width="1500">
    <el-table :data="tabledata2">
      <el-table-column property="id" label="编号" width="50" />
      <el-table-column property="goods_name" label="货物名称" width="100" />
      <el-table-column property="goods_type" label="类型" width="100" />
      <el-table-column property="material" label="材质" width="100" />
      <el-table-column property="specification" label="规格" width="100" />
      <el-table-column property="quantity" label="数量" width="100" />
      <el-table-column property="usage_description" label="用途描述" width="100" />
      <el-table-column property="applicant" label="申请人" width="100" />
      <el-table-column property="expected_delivery_date" label="期望交付日期" width="100" />
      <el-table-column property="remarks" label="备注" width="100" />
      <el-table-column property="create_time" label="创建时间" width="100" />
      <el-table-column property="approver" label="审批人" width="100" />
      <el-table-column property="status" label="状态" width="100">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status === '已拒绝'" type="danger">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status === '已通过'" type="success">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="" label="">
        <template v-slot="scope">
          <el-button type="primary" @click="tongguo(scope.row.id)">通过</el-button>
          <el-button type="danger" @click="jujue(scope.row.id)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
     </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox} from 'element-plus'
const dialogTableVisible = ref(false)
const dialogTableVisible2 = ref(false)
const tabledata=ref([])
const tabledata2=ref([])
const dai=()=>{
  dialogTableVisible.value=true
  axios.get("http://localhost:9991/api/goods_request/DaiShenPi").then((res)=>{
    tabledata.value=res.data
  })
}
const yi=()=>{
  dialogTableVisible2.value=true
  axios.get("http://localhost:9991/api/goods_request/YiShenPi").then((res)=>{
    tabledata2.value=res.data
  })
}
const tongguo=(id:number)=>{
  ElMessageBox.confirm  
  (
    '确定通过吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
  axios.get("http://localhost:9991/api/goods_request/TongYi",
  {params:{id:id}}
  ).then((res)=>{
    console.log(res.data)
    if(res.data==1){
      ElMessage({
        message: '成功',
        type: 'success',
      })
    }else{
      ElMessage.error('失败')
    }
  })
 })
}
const jujue=(id:number)=>{
  ElMessageBox.confirm  
  (
    '确定拒绝吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
  axios.get("http://localhost:9991/api/goods_request/JuJue",
  {params:{id:id}}
  ).then((res)=>{
    console.log(res.data)
    if(res.data==1){
      ElMessage({
        message: '成功',
        type: 'success',
      })
    }else{
      ElMessage.error('失败')
    }
  })
})
}
</script>

<style scoped>

</style>